<template>
    <u-navbar 
        placeholder 
        height="44px"
    >
        <template #left>
            <view>
                <text :class="state.tabCurrent === 0 ? 'active-tab' : 'tab'" style="margin-right: 50rpx;" @click="changeTab(0)">活动</text>
                <text :class="state.tabCurrent === 1 ? 'active-tab' : 'tab'" @click="changeTab(1)">闲置</text>
            </view>
        </template>
    </u-navbar>
    <u-sticky bgColor="#fff" :offset-top="44 + useUser.statusBarHeight" z-index="100">
        <u-tabs :list="tabsList" lineColor="#966BFF"></u-tabs>
        <view style="padding: 26rpx 26rpx 10rpx;">
            <view class="justify-between font24 weight" style="margin-bottom: 37rpx;">
                <view class="align-center" @click="screeningTime">
                    <text>全部时间</text>
                    <u-icon name="arrow-down-fill" size="8"></u-icon>
                </view>
                <view class="align-center">
                    <text>不限距离</text>
                    <u-icon name="arrow-down-fill" size="8"></u-icon>
                </view>
                <view>
                    <text>我发布的</text>
                </view>
                <u-icon name="map" color="#333"></u-icon>
            </view>
            <u-transition :show="state.showTime" mode="fade">
                <view class="flex-wrap" style="gap: 16rpx;">
                    <view 
                        v-for="(item, index) in timeOption" 
                        :key="index"
                        :class="['option', state.timeCurrent === index ? 'active-option' : '']"
                        @click="changeTime(index)" 
                    >{{ item.name }}</view>
                </view>
            </u-transition>
        </view>
    </u-sticky>
    <view class="content">
        <block v-if="state.tabCurrent === 0">
            <Activity v-for="item in 10" :key="item" />
        </block>
        <block v-if="state.tabCurrent === 1">
            <IdleCard v-for="item in 10" :key="item" />
        </block>
    </view>
    <view class="issue" @click="handlePopup">
        <u-icon name="plus" color="#fff"></u-icon>
    </view>
    <u-popup 
        :show="state.showPopup" 
        mode="bottom" 
        :round="10"
        @close="closePopup"
    >
        <view class="popup">
            <view class="justify-between mb36">
                <view class="box-popup" @click="handleNavigateTo('/pagesA/iseeueDynamic/index')">
                    <i class="iconfont icon-dongtai" style="font-size: 50rpx;"></i>
                    <text class="font30 weight ml26">发布动态</text>
                </view>
                <view class="box-popup" @click="handleNavigateTo('/pagesA/issueIdle/index')">
                    <i class="iconfont icon-fabuxianzhi" style="font-size: 50rpx;"></i>
                    <text class="font30 weight ml26">发布闲置</text>
                </view>
            </view>
            <view class="box-popup" @click="handleNavigateTo('/pagesA/issueEvent/index')">
                <i class="iconfont icon-fabuhuodong" style="font-size: 50rpx;"></i>
                <text class="font30 weight ml26">发布活动</text>
            </view>
        </view>
    </u-popup>
    <u-overlay :show="state.showTime" z-index="99"></u-overlay>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserPinia } from '@/store//modules/user';
import { handleNavigateTo } from '@/plugins/uniApp';
import IdleCard from '@/components/IdleCard/index.vue';
import Activity from '@/components/Activity/index.vue';

const useUser = useUserPinia();

const state = ref({
    tabCurrent: 0,
    showPopup: false,
    timeCurrent: 0,
    showTime: false
});

const tabsList = ref([
    { name: '最新' },
    { name: '全部' },
    { name: '体育器材' },
    { name: '电子产品' },
    { name: '洗漱用品' },
]);

const timeOption = ref([
    { name: '全部时间' },
    { name: '今天' },
    { name: '明天' },
    { name: '本周' },
    { name: '本周末' },
    { name: '往期' },
])

const changeTab = (value:number) => {
    state.value.tabCurrent = value;
}

const handlePopup = () => {
    state.value.showPopup = true;
    uni.hideTabBar();
}

const closePopup = () => {
    state.value.showPopup = false;
    uni.showTabBar();
}

const changeTime = (val:number) => {
    state.value.timeCurrent = val;
}

const screeningTime = () => {
    state.value.showTime = !state.value.showTime;
}
</script>

<style lang="scss" scoped>
.tab {
    font-size: 32rpx;
    color: #999999;
}

.active-tab {
    font-size: 42rpx;
    font-weight: 800;
    color: #1F2225;
}

.content {
    padding: 0 26rpx 38rpx;
}

.popup {
    padding: 70rpx 40rpx 108rpx;

    .box-popup {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22rpx 56rpx;
        box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(158,158,158,0.16);
        border-radius: 12rpx;
        text-align: center;
    }
}

.issue {
    position: fixed;
    bottom: 100rpx;
    right: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: #242424;
}

.option {
    width: 158rpx;
    height: 68rpx;
    background: #F8F8FA;
    border-radius: 12rpx;
    font-size: 26rpx;
    text-align: center;
    line-height: 68rpx;
}

.active-option {
    background: #966BFF;
    color: #fff;
}
</style>@/store/modules/user